<template>
  <div class="home-container">
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img src="../../../public/1.jpg" alt="" class="one"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../../public/1.jpg" alt="" class="one"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../../public/1.jpg" alt="" class="one"
        /></van-swipe-item>
        <van-swipe-item
          ><img src="../../../public/1.jpg" alt="" class="one"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <van-notice-bar
      left-icon="volume-o"
      text="当大脑没有思路,出去吹风,停下来,当大脑没有思路,出去吹风,停下来"
    />
    <div>
      <p>热门推荐</p>
      <van-grid :column-num="2">
        <van-grid-item v-for="value in 4" :key="value" icon="photo-o">
          <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
          <span>产品描述</span>
        </van-grid-item>
      </van-grid>
    </div>
    <div>
      <p class="newGengXin">
        <span>最近更新</span>
        <span class="time">24小时：0篇/1周：0篇</span>
      </p>
      <van-cell-group>
        <van-cell v-for="value in 4" :key="value">
          <div slot="title">文章标题</div>
          <div slot="label">
            <div>文章内容文章内容文章内容文章内容文章内容文章内容</div>
            <div>
              <span><van-icon name="eye" />收藏(xxx)</span>
              &nbsp;
              <span><van-icon name="good-job" />点赞(4231)</span>
            </div>
          </div>
          <div slot="default">
            <van-image
              width="80"
              height="60"
              src="https://img01.yzcdn.cn/vant/apple-2.jpg"
            />
          </div>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeIndex",
  components: {},
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.home-container {
  .my-swipe .van-swipe-item {
    height: 400px;
    color: #fff;
    font-size: 20px;
    line-height: 400px;
    text-align: center;
    background-color: #39a9ed;
  }
  .one {
    width: 100%;
  }
  .newGengXin {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .time {
      font-size: 30px;
    }
  }
}
</style>
